<template>
	<!-- 登录 -->
	<view class="content-box">
		<view class="head_name">
			<view class="user_name">
				欢迎登录鸿科焙烧温控
			</view>
			<view class="head-logo">
				<image src="/static/login/logo.png" mode="aspectFit"></image>
			</view>
		</view>
		<view class="accunt_password">
			<view class="modeSelection">
				<view class="modeSelection_name">账号密码登录</view>
				<view class="modeSelection_line"></view>
			</view>
			
			<view class="passwordeye">
				<u--input class="input" fontSize="24rpx" :placeholderStyle="place" :customStyle="btnGetCode"
					color="#333" prefixIcon="phone-fill"  prefixIconStyle="font-size: 22px;color: #0F55B7"  shape="circle" v-model="loginInfo.accunt" clearable placeholder="请输入您的用户名"></u--input>

			</view>
			<view class="passwordeye">
				<u--input class="input" fontSize="24rpx" :placeholderStyle="place" :customStyle="btnGetCode"
					color="#333" prefixIcon="lock-fill"  prefixIconStyle="font-size: 22px;color: #0F55B7" shape="circle" type="password" v-model="loginInfo.password"
					placeholder="请输入您的密码"></u--input>
			</view>
		</view>
		<view class="btnbox">
			<view class="remember">
				<u-checkbox-group v-model="checked" placement="column" @change="checkboxChange">
					<u-checkbox labelColor="#0F55B7" label="记住密码" name="记住密码" size="24rpx" label-size="24rpx">
					</u-checkbox>
				</u-checkbox-group>
			</view>
			<view class="forgetPassword" @click="goForgotPassword">
				忘记密码?
			</view>
		</view>

		<button @click="login" style="margin-top: 48rpx;background-color:#0F55B7 !important;border-radius: 16rpx;">
			点击登录
		</button>
		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script setup>
	import { useWebsocket } from "@/store/websocket.js";
	import {
		reactive,
		ref,
		getCurrentInstance,

	} from 'vue';
	
	import {
		onShow
	} from "@dcloudio/uni-app";
	let {
		proxy
	} = getCurrentInstance();
	const loginInfo = reactive({
		accunt: '',
		password: ''
	})
	const btnGetCode = reactive({
		border: '1rpx solid #0F55B7 !important',
		'border-radius':' 16rpx 16rpx 16rpx 16rpx',
		padding: '22rpx 0 22rpx 48rpx !important'
	})
	const place = reactive({
		color: '#707070 !important',
		fonSize: '100rpx !important',

	})
	let checked = ref([])
	
		
	const login = () => {
		
		if (uni.$u.test.isEmpty(loginInfo.accunt) || uni.$u.test.isEmpty(loginInfo.password)) {
			proxy.$refs.uToast.show({
				type: 'error',
				message: '请填写账号或密码!'
			})
			return false;
		}
		// if (!uni.$u.test.mobile(loginInfo.accunt)) {
		// 	proxy.$refs.uToast.show({
		// 		type: 'error',
		// 		message: '请输入正确的手机号!'
		// 	})
		// 	return false;
		// }
		if (loginInfo.password.length < 6) {
			proxy.$refs.uToast.show({
				type: 'error',
				message: '请从新输入密码最少六位!'
			})
			return false;
		} else {

			let opts = {
				url: proxy.$api.login,
				method: "POST",
			};
			let data = {
				username: loginInfo.accunt,
				password: loginInfo.password,

			};
			proxy.$request.baseRequest(opts, data).then((res) => {
				if (res.data.code === 200) {
					uni.setStorageSync("token",res.data.result);
					if(checked.length > 0){
						uni.setStorageSync("userInfo", {
							userPhone: loginInfo.accunt,
							userPassword: loginInfo.password,
						});
					}
					uni.switchTab({
						url:'/pages/index/index'
					})
					useWebsocket().initWebsocket()
				}else{
					proxy.$refs.uToast.show({
						type: 'error',
						message: res.data.message
					})
				}
			}).catch((err) => {
				proxy.$refs.uToast.show({
					type: 'error',
					message: err.message
				})
			})

			
			
		}


	}
	
	
	// 记住密码
	function checkboxChange(e) {
		if (e.length > 0) {
			checked = e[0]
			uni.showToast({
				icon: "none",
				title: "记住密码",
			});
			uni.setStorageSync("isTrue", checked);
		} else {
			uni.removeStorageSync("userInfo");
			uni.setStorageSync("isTrue", []);
		}
	}

	function goForgotPassword() {
		uni.navigateTo({
			url: '/pages/forgotpassword/forgotpassword'
		})
	}

	onShow(() => {
		if (uni.getStorageSync("isTrue")) {
			checked = [uni.getStorageSync("isTrue")]
			if (uni.getStorageSync("isTrue").length > 0) {
				loginInfo.accunt = uni.getStorageSync("userInfo").userPhone
				loginInfo.password = uni.getStorageSync("userInfo").userPassword
			}
		}
	})
</script>

<style lang="scss">
	page {
		background: #F1F5F5;
	}
	.passwordeye{
		.u-input{
			
			background-color: #ffffff !important;
		}
	}
</style>
<style lang="scss" scoped>
	button {
		width: 610rpx;
		height: 88rpx;
		margin: 0 auto;
		margin-top: 82rpx;
		background-color: #3D5788 ;
		color: #ffffff;
		line-height: 88rpx;
	}



	.content-box {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		overflow-x: hidden;
		.type-box {
			text-align: center;
			width: 100%;
			padding: 20rpx;
			box-sizing: border-box;
			display: flex;
			flex-direction: row;

			.type-box_item {
				flex: 1;
				text-align: center;
				font-size: 24rpx;
				font-weight: 600;
				color: #333333;
			}

			.active {
				font-size: 30rpx;
				font-weight: 600;
				color: #3a84ef;
				text-align: center;

				.line-Box {
					display: inline-block;
					width: 110rpx;
					height: 5rpx;
					margin-top: 3rpx;

					background-color: #3a84ef;
				}
			}
		}

		.tab {
			position: absolute;
			top: 250rpx;
			left: 20rpx;
			right: 20rpx;
			height: 150rpx;
			padding: 0 50rpx;
			background-color: #fff;
			border-top-left-radius: 20rpx;
			border-top-right-radius: 20rpx;

			&-bg {
				position: absolute;
				top: -200rpx;
				right: -50rpx;
				width: 440rpx;
				height: 285rpx;
			}
		}

		.head_name {
			width: 100%;
			height: 600rpx;
			background: #0F55B7;
			text-align: center;
			position: relative;
			
			&::after{
				content:'';
				width: 140%;
				position: absolute;
				left: -20%;
				height: 500rpx;
				bottom: -80rpx;
				z-index: -1;
				background: #0F55B7;
				border-radius: 0 0 50% 50%;
			}
			.head-logo{
				position: absolute;
				width: 520rpx;
				height: 270rpx;
				top: 300rpx;
				left: 50%;
				transform: translateX(-50%);
				image{
					width: 100%;
					height: 100%;
				}
			}
			.user_name {
				font-size: 34rpx;
				color: #ffffff;
				position: absolute;
				width: 100%;
				text-align: center;
				top:180upx;
				font-weight: 500;
			}
		}

		.btnbox {
			padding-top: 16rpx;
			
			display: flex;
			justify-content: space-between;
			align-items: center;
			box-sizing: border-box;

			.remember {
				box-sizing: border-box;
				padding-left: 80rpx;
				padding-right: 80rpx;
			}

			.forgetPassword {
				box-sizing: border-box;
				padding-left: 80rpx;
				padding-right: 80rpx;
				text-align: right;
				font-size: 24rpx;
				color: #0F55B7;

			}
		}


		.accunt_password {
			// margin-top: 140rpx;
			padding: 140rpx 98rpx 0 98rpx;
			
			// padding-left: 98rpx;
			// padding-right: 98rpx;	
			box-sizing: border-box;
			// background-color: #0068E1;
			.modeSelection{
				margin-bottom: 80rpx;
				
				&_name{
					font-size: 32rpx;
					color: #000;
					margin-bottom: 4rpx;
				}
				&_line{
					width: 196rpx;
					height: 8rpx;
					background: #0F55B7;
					border-radius: 8rpx 8rpx 8rpx 8rpx;
				}
			}

			.accunt {
				font-size: 32rpx;
				font-weight: bold;
				margin-top: 60rpx;
			}

			.passwordeye {
				
				margin-bottom: 48rpx;
				display: inline-block;
				// width: 610rpx;
				width: 100%;
				position: relative;

				::v-deep .input {
					
					.u-input__input {
						font-size: 24rpx !important;
						// border: 2rpx solid #0F55B7 !important;
					}
				}

				.clear {
					position: absolute;
					top: 0;
					right: 0;
					margin-top: 30rpx;
					margin-right: 40rpx;
					background-size: 60% 60%;
					z-index: 20;
				}

				.eyebox {
					position: absolute;
					width: 80rpx;
					height: 50rpx;
					top: 0;
					right: 0;
					margin-top: 30rpx;
					padding-left: 2rpx;
					background-size: 60% 60%;
					z-index: 20;

				}
			}

		}


		.login-tip {
			text-align: center;
			width: 100%;
			font-size: 24rpx;
			line-height: 36rpx;
			color: #999999;
			left: 0;
			padding: 0 16rpx;
			margin-top: 32px;
			.tip {
				color: #0068E1;
				display: inline;
			}
		}

	}
</style>